<template>
  <div class="btns noDrag">
    <div class="btn" @click="minimize()">
      <span class="iconfont iconminimize"></span>
    </div>

    <div class="btn" @click="unmaximize()" v-if="state.isMaximized">
      <span class="iconfont iconxiangxiahuanyuan"></span>
    </div>

    <div v-else class="btn" @click="maximize()">
      <span class="iconfont iconmaximize"></span>
    </div>

    <div class="btn close" @click="close()">
      <span class="iconfont iconclose"></span>
    </div>
  </div>
</template>

<script lang="ts">
import { BrowserWindow } from 'electron'
import { state } from '@/store/state'
import mutations from '@/store/mutations'

const win: BrowserWindow = window.require('electron').remote.getCurrentWindow()
win.on('maximize', () => {
  state.isMaximized = true
})
win.on('unmaximize', () => {
  state.isMaximized = false
})

export default {
  setup() {
    return {
      state,
      maximize() {
        win.maximize()
      },
      unmaximize() {
        win.unmaximize()
      },
      close() {
        const trayOnClose: boolean = localStorage.trayOnClose === 'true'
        if (trayOnClose) {
          mutations.tray()
        } else {
          mutations.close()
        }
      },
      minimize() {
        win.minimize()
      }
    }
  }
}
</script>
<style lang="less" scoped>
.btns {
  fill: rgb(126, 54, 54);
  display: flex;
  .btn {
    padding: 6px 15px;
    &:hover {
      background: #c7cacf;
      &.close {
        background: red;
        color: white;
      }
    }
  }
}
</style>
